<template>
  <div >
    <!-- 轮播图区域 -->
    <swiper :lunbotuList="lunbotuList" :isfull="true"></swiper>

    <!-- 六宫格 -->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/newslist">
              <img src="../../assets/images/menu1.png" alt="">
              <div class="mui-media-body">新闻资讯</div></router-link></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/photolist">
              <img src="../../assets/images/menu2.png" alt="">
              <div class="mui-media-body">图片分享</div></router-link></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/goodslist">
              <img src="../../assets/images/menu3.png" alt="">
              <div class="mui-media-body">商品购买</div></router-link></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="#">
              <img src="../../assets/images/menu4.png" alt="">
              <div class="mui-media-body">留言反馈</div></router-link></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="#">
              <img src="../../assets/images/menu5.png" alt="">
              <div class="mui-media-body">视频专区</div></router-link></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="#">
              <img src="../../assets/images/menu6.png" alt="">
              <div class="mui-media-body">联系我们</div></router-link></li>

    </ul> 
    <h3>HomeContainer</h3>
  </div>
</template>

<script>
import {Toast} from 'mint-ui'
import swiper from '../subcomponents/swiper.vue'

export default {
  components:{
    swiper
  },
  data(){
    return {
      lunbotuList:[]
    }
  },
  created(){
    this.getLunbotu()
  },
  methods:{
    getLunbotu(){//获取轮播图数据的方法
      this.$axios({
          method:'get',
          url:'/api/getlunbo',
          // data:this.qs.stringify({    //这里是发送给后台的数据
          //       userId:this.userId,
          //       token:this.token,
          // })
      }).then((response) =>{          //这里使用了ES6的语法
          //console.log(response)       //请求成功返回的数据
          if(response.status==200){
            this.lunbotuList = response.data.message
          }else{
            Toast('加载轮播图失败！')
          }
      }).catch((error) =>{
          console.log(error)       //请求失败返回的数据
      })
        
    }
  },

}
</script>

<style scoped>
.mui-grid-view.mui-grid-9 {
  background-color: white;
  border:none;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell{
  border:0;
}
.mui-grid-view.mui-grid-9 img{
  width: 60px;
  height: 60px;
}
.mui-grid-view.mui-grid-9 .mui-media-body{
  font-size: 13px;
}
</style>
